<template>
  <div id="app-container" style="padding: 10px">
    <el-steps :active="detailOrder.orderStatus | StepsActive" align-center>
      <el-step title="车辆驶入" icon="el-icon-success" :description="detailOrder.createTime"></el-step>
      <el-step title="车辆驶离" icon="el-icon-timer" :description="detailOrder.leaveTime"></el-step>
      <el-step title="订单支付" icon="el-icon-finished" :description="detailOrder.payTime"></el-step>
    </el-steps>
    <div style="margin-top: 10px; margin-bottom: 10px; padding: 20px; line-height: 50px; background-color: #eeeeee">
      <span style="font-size: 20px" :class="detailOrder.orderStatus | StatusColor">当前订单状态：{{detailOrder.orderStatus | orderStatus}}</span>
      <el-button style="float: right" type="danger" :disabled="btnDisabled" @click="handleToFinish">结束订单</el-button>
    </div>
    <div style="border: solid 2px #c0c4cc; overflow: hidden">
      <div style="width: 50%; float: left; padding: 10px; border-right: solid 2px #c0c4cc">
        <p class="OrderMessage">订单编号：<span class="OrderContextColor">{{detailOrder.orderCode}}</span></p>
        <p class="OrderMessage">车牌号码：<span class="OrderContextColor">{{detailOrder.carNumber}}</span></p>
        <p class="OrderMessage">绑定用户：<span class="OrderContextColor">{{detailOrder.userName}}</span></p>
        <p class="OrderMessage">所属路段：<span class="OrderContextColor">{{detailOrder.roadName}}</span></p>
        <p class="OrderMessage">泊位编号：<span class="OrderContextColor">{{detailOrder.berthCode}}</span></p>
        <p class="OrderMessage" style="padding-left: 12px">巡检员：<span class="OrderContextColor">{{detailOrder.inspectorName}}</span></p>
      </div>
      <div style="width: 50%; float: right; padding: 10px">
        <p class="OrderMessage">驶入时间：<span class="OrderContextColor">{{detailOrder.createTime}}</span></p>
        <p class="OrderMessage">停车时长：<span class="OrderContextColor">{{detailOrder.parkingTime}}</span></p>
        <p class="OrderMessage">
          <span style="float: left">驶入图片：</span>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
          <el-image style="width: 100px; height: 100px" src="#" fit="fill"></el-image>
        </p>
      </div>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px; padding: 20px; line-height: 30px; text-align: right; background-color: #eeeeee">
      <span style="font-size: 16px;font-weight: bold;">合计：</span>
      <span v-if="detailOrder.modifyPrice" style="font-size: 24px;font-weight: bold; color: red">{{detailOrder.modifyPrice | BigDecimal}}</span>
      <span v-else-if="detailOrder.price" style="font-size: 24px;font-weight: bold; color: red">{{detailOrder.price | BigDecimal}}</span>
      <span v-else style="font-size: 24px;font-weight: bold; color: red">待核算</span>
    </div>
  </div>
</template>

<script>

import { getDetailById,updateOrderToPay } from '../../api/order'

  export default {
    data(){
      return {
        detailOrder: {},            // 订单数据
        btnDisabled: false,          // 结束订单按钮不可用状态
      }
    },
    filters: {
      BigDecimal: function(value) {
        if(value == null){
          return `待核算`
        }
        return `￥ ${parseFloat(value).toFixed(2)} 元`
      },
      orderStatus: function(value) {
        switch (value) {
          case '1':
            return '进行中';
          case '2':
            return '待支付';
          case '3':
            return '已支付';
          case '4':
            return '已完成';
          case '5':
            return '申诉中';
          case '6':
            return '申诉失败';
          case '7':
            return '已退款';
          default:
            return '未获取到状态';
        }
      },
      StatusColor: function(value) {
        switch (value) {
          case '1':
            return 'OnGoing';
          case '2':
            return 'NotPay';
          case '3':
            return 'IsPay';
          case '4':
            return 'Finish';
          case '5':
            return 'IsAppeal';
          case '6':
            return 'AppealFail';
          case '7':
            return 'Refunded';
          default:
            return 'StatusError';
        }
      },
      StepsActive: function(value) {
        switch (value) {
          case '1':
            return 1;
          case '2':
            return 2;
          case '3':
            return 3;
          default:
            return 3;
        }
      }
    },
    methods: {
      initData(){
        // 获取路由中的参数
        if(this.$route.params.detailOrderVO != undefined && this.$route.params.detailOrderVO != null){
          this.detailOrder = this.$route.params.detailOrderVO;
        }
        // 订单不是进行中("1")时，禁用结束订单按钮
        if(this.detailOrder.orderStatus != "1"){
          this.btnDisabled = true;
        }
      },
      flushData(){
        getDetailById(this.detailOrder.id).then(res => {
          this.detailOrder = res.data;
          // 订单不是进行中("1")时，禁用结束订单按钮
          if(this.detailOrder.orderStatus != "1"){
            this.btnDisabled = true;
          }
        })
      },
      // 点击结束订单按钮
      handleToFinish(){
        this.$confirm('是否确定结束这笔订单？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          updateOrderToPay(this.detailOrder.id).then(res => {
            this.flushData();
            this.$message({
              type: 'success',
              message: res.message
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    created(){
      this.initData();
    }
  }
</script>

<style>
.OnGoing{
  color: black;
}
.NotPay{
  color: red;
}
.IsPay{
  color: green;
}
.Finish{
  color: blue;
}
.IsAppeal{
  color: #4d0f7d;
}
.AppealFail{
  color: orange;
}
.Refunded{
  color: #5bc648;
}
.OrderMessage{
  font-size: 14px;
  font-weight: bold;
}
.OrderContextColor{
  color: gray;
  font-weight: normal;
}
</style>
